// // 控制搜索列表，显示/隐藏
// const searchList = document.querySelector('.search-list')
// document.querySelector('.search-city').addEventListener('input', (e) => {
//   console.log(e.target.value, 8);
//   if (e.target.value.length > 0) {
//     searchList.classList.add('show')
//   } else {
//     searchList.classList.remove('show')
//   }
// })

// /* 失去焦点 */
// document.querySelector('.search-city').addEventListener('blur', (e) => {
//   console.log(e.target.value, 8);
//   // 延迟消失，保证点击获取到城市code后，再隐藏下拉列表
//   setTimeout(() => {
//     searchList.classList.remove('show')
//   }, 500)
// })

// // 输入框聚焦，显示搜索列表
// document.querySelector('.search-city').addEventListener('focus', (e) => {
//   console.log(e.target.value, 8);
//   if (e.target.value.length > 0) {
//     searchList.classList.add('show')
//   }
// })


/* 展示下拉框效果
1、输入有值  显示
2、失去焦点==隐藏
3、聚焦并且表单有值==显示

如何控制显示和隐藏===添加show类名
*/

const searchList = document.querySelector('.search-list')
document.querySelector('.search-city').addEventListener('input', (e) => {
  // console.log(e.target.value);
  if (e.target.value.trim().length > 0) {
    //显示对话框
    searchList.classList.add('show')
  } else {
    searchList.classList.remove('show')
  }
})

document.querySelector('.search-city').addEventListener('blur', (e) => {
  setTimeout(() => {
    searchList.classList.remove('show')
  }, 200)
})

document.querySelector('.search-city').addEventListener('focus', (e) => {
  if (e.target.value.trim().length > 0) {
    //显示对话框
    searchList.classList.add('show')
  } else {
    searchList.classList.remove('show')
  }
})
